<template>
  <header>
    <div class="header">
      <div class="header-top">
        <div class="header-wrap">
          <div class="header-user">
            <span>尚品汇欢迎您！</span>
            <span v-if="name">
              <span>{{ name }}</span>
              <el-button type="primary" :style="{height:30}" @click="handelLogout">退出登录</el-button>
            </span>
            <span v-else
              >请&nbsp;<router-link to="/login"> 登入</router-link> |&nbsp;
              <router-link to="/register"> 免费注册</router-link></span
            >
            
          </div>
          <ul class="header-list">
            <li> <router-link to="/center" >我的订单</router-link>  </li>
            <li><router-link to="/shopcart" >我的购物车</router-link> </li>
            <li>我的尚品汇</li>
            <li>尚品汇会员</li>
            <li>企业采购</li>
            <li>关注尚品汇</li>
            <li>合作招商</li>
            <li>商家后台</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="header-bottom header-wrap">
      <router-link to="/home">
        <img src="./images/logo.png" alt="" class="img" />
      </router-link>
      <!-- 在form表单里的button 默认有表单提交， 给form 注册submit事件,但会跳转刷新，需要加事件修饰符.prevent阻止默认行为 -->
      <form class="header-form" @submit.prevent="isSearch">
        <!-- 点击跳转时，需要携带input的value值 ，帮定 v-model -->
        <input type="text" class="header-input" v-model="keyword" />
        <button class="header-btn">索搜</button>
      </form>
    </div>
  </header>
</template>

<script>
// import router from '@/router';
import { mapState,mapMutations } from "vuex";
import {loginOut} from "@/api/axios/userlogin"
export default {
  name: "XHead",
  methods: {
     ...mapMutations('user',["LOGOUT"]),
    isSearch() {
      const keyword = this.keyword;
      // 三点运算展开，成为新的对象
      const query = { ...this.$route.query };
      delete query.keyword; //删除keyword 为了v-model数据keyword 双向数据绑定

      if (this.keyword) {
        query.keyword = keyword;
      }
      this.$router.push({
        name: "Search",
        query,
      });
      /*  if (this.keyword) {
        this.$router.push({
          name: "Search",
          query: {
            keyword: this.keyword,
          },
        });
      } else {
        this.$router.push({
          name: "Search",
          query: {
            keyword: {},
          },
        });
      } */
    },
   async logout(){
        await loginOut()
        this.LOGOUT()
    },
   async handelLogout(){
      await  this.logout()
      //  this.$router.push('/')
    }
  },
  data() {
    return {
      keyword: "",
    };
  },
  watch: {
    $route: {
      handler(route) {
        this.keyword = route.query.keyword;
      },
      immediate: true,
    },
  },
  computed: {
    ...mapState({
      name: (state) => state.user.name,
    }),
  },
};
</script>

<style scoped>
.header-top {
  height: 30px;
  background-color: #eaeaea;
  overflow: hidden;
}
.header-wrap {
  margin: 0 auto;
  width: 1200px;
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.header-list {
  height: 100%;
  display: flex;
  align-items: center;
}
.header-list li {
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid #b3aeae;
}
.header-list li:last-child {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}
.header-bottom {
  height: 100px;
}
.header-input {
  width: 500px;
  height: 30px;
  border: 2px solid #ea4a36;
  outline: none;
  padding: 0 10px;
}
.header-btn {
  width: 68px;
  height: 34px;
  background-color: #ea4a36;
  border: none;
  color: white;
  cursor: pointer;
}
.header-form {
  display: flex;
}
</style>
